<template>
	<view class="page-container">
		<date-range-picker @change="handleChangeDate" />
		<view class="white-block">
			<view class="label-block-item" v-for="(item, index) in labelList" :key="item.name">
				<p class="label-block-item-top">
					<span>{{ item.name }}</span>
					<span :class="item.type">￥{{ item.count }}</span>
				</p>
				<view class="label-block-item-bottom">
					<view class="label-block-item-bottom-inner" :style="getStyle(item, index)"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed, ref } from 'vue';
	import { getColor } from '../../utils/utils.js';
	import DateRangePicker from '../../components/date-range-picker.vue';

	import { getBills } from '@/api/bill'

	const labelList = ref([])
	const maxCount = computed(()=>{
		return labelList.value.reduce((pre, cur) =>{
			const count = Math.abs(cur.count);
			return count > pre? count : pre
		}, 0)
	})
	const getLabelList = async () => {
		labelList.value = [
			{
				_id: 1,
				name: '餐饮',
				type: 'expenditure',
				count: -1586
			},
			{
				_id: 2,
				name: '交通',
				type: 'expenditure',
				count: -586
			},
			{
				_id: 3,
				name: '工资',
				type: 'income',
				count: 13000
			},
			{
				_id: 4,
				name: '娱乐',
				type: 'expenditure',
				count: -1586
			},
			{
				_id: 5,
				name: '学习',
				type: 'expenditure',
				count: -1586
			},
			{
				_id: 6,
				name: '理财',
				type: 'expenditure',
				count: -1586
			},
		].sort((a, b) => {
			const aCount = Math.abs(a.count)
			const bCount = Math.abs(b.count)
			return bCount - aCount
		})
	}
	const handleChangeDate = async dateRange =>{
		let _labelList = []
		const res = await getBills({
			dateRange
		})
		console.log(`data/index】【获取账单结果】`, res)
		const labels = getAllLabels(res)
		const getBillsHasLabel = label => {
			return res.filter(item=>{
				return item.labels.includes(label)
			})
		}
		labels.forEach(label=>{
			let count = 0
			const billsHasLabel = getBillsHasLabel(label)
			billsHasLabel.forEach(bill=>{
				const billCount = {
					expenditure: -Number(bill.count),
					income: Number(bill.count)
				}[bill.type]
				count += billCount
			})
			_labelList.push({
				name: label,
				type: count > 0 ? 'income' : 'expenditure',
				count
			})
		})
		labelList.value = _labelList.sort((a, b) => {
			const aCount = Math.abs(a.count)
			const bCount = Math.abs(b.count)
			return bCount - aCount
		})
	}
	const getAllLabels = billList =>{
		let labels = []
		billList.forEach(bill => {
			labels = [
				...labels,
				...bill.labels
			]
		});
		labels = Array.from(new Set(labels))
		return labels
	}
	const getStyle = (item, index) =>{
		const width = Math.abs(item.count) / maxCount.value * 100
		const color = getColor(index)
		return `width: ${width}%; background-color: ${color}`
	}
</script>

<style lang="less" scoped>
.page-container{
	.white-block{
	margin-top: 30rpx;
		padding-bottom: 30rpx;
		.label-block-item{
			margin-top: 30rpx;
			.label-block-item-top{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #333333;
				span.expenditure{
					color: #FF6B6B;
				}
				span.income{
					color: #00CC99;
				}
			}
			.label-block-item-bottom{
				height: 16rpx;
				width: 100%;
				border-radius: 8rpx;
				background-color: #F5F5F5;
				.label-block-item-bottom-inner{
					height: 100%;
					border-radius: 8rpx;
					background-color: #5B8FF9;
				}
			}
		}
	}
}
</style>
